import React, {Component} from 'react';
import {DeviceEventEmitter, FlatList, TouchableOpacity, View} from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";

import Header from "../components/Header";
import ModalPicker from '../components/ModalPicker/';
import {MyStatusBar} from "../components/MyStatusBar";
import BookItem from "../components/BookItem";

import {loadBooksFromStorage, onLayout} from '../actions/HomeAction';

import {apis} from "../apis";

class HomeScreen extends Component {
    constructor() {
        super();
        this.state = {};
    }

    componentDidMount(): void {
        this.subscription = DeviceEventEmitter.addListener('refreshBooks', (ret) => {
            this.loadBooks();
        });
        this.loadBooks();
        this.loadOptions();
    }

    componentWillUnmount(): void {
        this.subscription.remove();
    }

    loadBooks() {
        loadBooksFromStorage().then(res => {
            this.setState({mergeBooks: res.arr});
        }).catch(err => {
            alert(err);
        });
    }

    loadOptions = () => {
    };

    renderBooks = () => {
        return (
            <FlatList
                keyExtractor={(item, index) => item.title}
                data={this.state.mergeBooks}
                renderItem={({item: rowData}) => {
                    return (
                        <TouchableOpacity
                            activeOpacity={0.5}
                            onPress={() => {
                                let pickerData = [];
                                pickerData.push({key: '', section: true, label: rowData.title});
                                for (let i in rowData.array) {
                                    let each = rowData.array[i];
                                    pickerData.push({
                                        key: i,
                                        label: apis[each.source].name,
                                        book: each,
                                        books: rowData.array
                                    });
                                }
                                this.setState({pickerData: pickerData});
                                this._picker.open();
                            }}>
                            <BookItem {...{title: rowData.title}}/>
                        </TouchableOpacity>
                    )
                }}
            />
        );
    };

    renderHeader = () => {
        return (
            <Header
                headerLeft={<Icon name={'ios-options'} size={24} color={'#f0f0f0'}/>}
                headerLeftOnPress={() => {
                    this.props.navigation.navigate('Options');
                }}
                headerRightOnPress={() => {
                    this.props.navigation.navigate('Search', {keyword: ''});
                }}
            />
        );
    }

    renderDialog = () => {
        return (
            <ModalPicker
                style={{height: 0}}
                cancelText="关闭"
                data={this.state.pickerData}
                ref={picker => {
                    this._picker = picker;
                }}
                initValue="Select something yummy!"
                onChange={(_option) => {
                    this.props.navigation.navigate('Book', {
                        book: _option.book,
                        books: _option.books,
                        existed: true
                    });
                }}
            />
        );
    }

    render() {
        return (
            <View style={{flex: 1}} onLayout={onLayout}>
                <MyStatusBar backgroundColor="#f4511e"/>
                {this.renderHeader()}
                {this.renderBooks()}
                {this.renderDialog()}
            </View>
        );
    }
}

export default HomeScreen;